<template>
  <view class="charts">
    <view class="top_box">
      <shopro-navbar :isBack="true">
        <view slot="content"> <view class="title">冲榜取豪礼</view></view>
      </shopro-navbar>
    </view>
    <view class="contain">
      <view class="charts_box">
        <view class="nav">
          <u-tabs
            :list="tabList"
            :is-scroll="false"
            :current="current"
            @change="tabChange"
            class="nav_box"
            active-color="#000000"
            inactive-color="#A1A1A1"
            font-size="30"
            :bar-style="barStyle"
          ></u-tabs>
        </view>
        <view class="main">
          <view class="second_box">
            <view class="number">2</view>
            <view class="user" v-if="rankList.length >= 2">
              <view class="top_imgBox">
                <view class="avatar_frame">
                  <img :src="$IMG_URL + frameImg.n2" alt="" />
                </view>
                <view class="photo_box">
                  <img :src="rankList[1].avatar" alt="" />
                </view>
              </view>
              <view class="name">{{ rankList[1].nickname }}</view>
            </view>
          </view>
          <view class="first_box">
            <view class="number">1</view>
            <view class="user" v-if="rankList.length >= 1">
              <view class="top_imgBox">
                <view class="avatar_frame">
                  <img :src="$IMG_URL + frameImg.n1" alt="" />
                </view>
                <view class="photo_box">
                  <img :src="rankList[0].avatar" alt="" />
                </view>
              </view>
              <view class="name">{{ rankList[0].nickname }}</view>
            </view>
          </view>
          <view class="third_box">
            <view class="number">3</view>
            <view class="user" v-if="rankList.length >= 3">
              <view class="top_imgBox">
                <view class="avatar_frame">
                  <img :src="$IMG_URL + frameImg.n3" alt="" />
                </view>
                <view class="photo_box">
                  <img :src="rankList[2].avatar" alt="" />
                </view>
              </view>
              <view class="name">{{ rankList[2].nickname }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="chartsList">
        <view class="tap">
          <view
            class="currentTap"
            :class="currentTap == 0 ? 'activeTap' : ''"
            @click="onClickHandle('', 'periodTap', { data: 0 })"
            >本期榜单</view
          >
          <view
            class="currentTap"
            :class="currentTap == 1 ? 'activeTap' : ''"
            @click="onClickHandle('', 'periodTap', { data: 1 })"
            >上期榜单</view
          >
        </view>
        <view
          class="current_prize"
          @click="onClickHandle('', 'showCurrentPrize', {})"
          >本期奖品</view
        >
        <view class="lineBox" v-for="(item, index) in rankList" :key="index">
          <view class="paiNumber">
            <img
              :src="item.rank == 1 ? n1 : item.rank == 2 ? n2 : n3"
              alt=""
              v-if="item.rank <= 3"
            />
            <view class="paiText" v-else>{{ item.rank }}</view>
          </view>
          <view class="photo">
            <view
              class="avatar_frame"
              v-if="item.rank !== null && item.rank <= 3"
            >
              <img
                :src="
                  item.rank == 1
                    ? $IMG_URL + frameImg.n1
                    : item.rank == 2
                    ? $IMG_URL + frameImg.n2
                    : $IMG_URL + frameImg.n3
                "
                alt=""
              />
            </view>
            <view class="photo_box">
              <img :src="item.avatar" alt="" />
            </view>
          </view>
          <view class="detail_box">
            <view class="name">{{ item.nickname }}</view>
            <view class="money">财富值{{ item.value }}</view>
          </view>
          <view class="prize" v-if="item.award.award_type == 'goods'">
            <img :src="item.award.image" alt="" />
          </view>
          <view class="prize_name" v-if="item.award.award_type == 'goods'"
            >{{ item.award.goods_title }}x{{ item.award.num }}</view
          >
          <view class="prize_name" v-if="item.award.award_type == 'coupon'"
            >{{ item.award.coupon_title }}x{{ item.award.num }}</view
          >
        </view>
      </view>
    </view>
    <view class="bottom_box">
      <view>
        <view class="paiNumber" v-if="cur_user.rank">
          <img
            :src="cur_user.rank == 1 ? n1 : cur_user.rank == 2 ? n2 : n3"
            alt=""
            v-if="cur_user.rank <= 3"
          />
          <view class="paiText" v-else>{{ cur_user.rank }}</view>
        </view>
        <view class="paiText" v-else>未上榜</view>
      </view>
      <view class="photo">
        <view
          class="avatar_frame"
          v-if="cur_user.rank !== null && cur_user.rank <= 3"
        >
          <img
            :src="
              cur_user.rank == 1
                ? $IMG_URL + frameImg.n1
                : cur_user.rank == 2
                ? $IMG_URL + frameImg.n2
                : $IMG_URL + frameImg.n3
            "
            alt=""
          />
        </view>
        <view class="photo_box">
          <img :src="cur_user.avatar" alt="" />
        </view>
      </view>

      <view class="detail_box">
        <view class="name">{{ cur_user.nickname }}</view>
        <view class="money">我的财富值{{ cur_user.value }}</view>
      </view>
      <view>
        <!-- <view class="prize">
          <img
            :src="
              $IMG_URL +
              '/uploads/20230520/06473efcf93f2bcb326a284dfbca189e.png'
            "
            alt=""
          />
        </view>
        <view class="prize_name">奖品名称… x1</view> -->
        <view class="text" v-if="cur_user.rank === null"
          >距离上榜还差：{{ cur_user.distance_value }}</view
        >
      </view>
    </view>
    <view class="rules">规则</view>
    <view class="my_prize" @click="onClickHandle('', 'showMyPrize', {})"
      >我的奖品</view
    >
    <!-- 本期奖品弹出层 -->
    <currentPrize
      :show="showCurrentPrize"
      @noShow="noShowCurrentPrize"
      :type="type"
    ></currentPrize>
    <!-- 我的奖品弹出层 -->
    <myPrize
      :show="showMyPrize"
      @noShow="noShowMyPrize"
      class="m_prize"
    ></myPrize>
  </view>
</template>
<script>
import n1 from './images/n1.png';
import n2 from './images/n2.png';
import n3 from './images/n3.png';
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
import currentPrize from './components/current-prize.vue';
import myPrize from './components/my-prize.vue';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: { currentPrize, myPrize },
  data() {
    return {
      tabList: [
        {
          name: '日榜',
        },
        {
          name: '周榜',
        },
        {
          name: '月榜',
        },
      ],
      current: 0,
      barStyle: {
        background: '#A084F0',
        borderRadius: '10rpx',
      },
      n1: n1,
      n2: n2,
      n3: n3,
      currentTap: 0,
      frameImg: {
        n1: '/uploads/20230519/f88b4c1bedaec2b41bfb1f42c265a30a.png',
        n2: '/uploads/20230519/ae5f8ba88d6e6a165190c78b2a09a176.png',
        n3: '/uploads/20230519/761dd2972197d8da09f295971044ccb6.png',
      },
      showCurrentPrize: false,
      showMyPrize: false,
      type: 'day', //day=日榜,week=周榜,month=月榜
      period: 'current', //current=本期,last=上期
      rankList: [],
      cur_user: {},
      top_three_list: [], //前三名
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {
    this.getRankList();
  },
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    //排行榜列表
    getRankList() {
      this.$http(
        'v1.getRankList',
        {
          type: this.type,
          period: this.period,
        },
        '请稍等'
      ).then((res) => {
        if (res.code === 1) {
          this.rankList = res.data.list;
          this.cur_user = res.data.cur_user;
          if (res.data.list.length > 3) {
            this.top_three_list = res.data.list.slice(0, 3);
          } else {
            this.top_three_list = res.data.list;
          }
        }
      });
    },
    //切换排行榜类型
    tabChange(index) {
      this.current = index;
      this.type = index == 1 ? 'week' : index == 2 ? 'month' : 'day';
      this.getRankList();
    },
    //切换本期或者上期排行榜
    periodTap(data) {
      if (this.currentTap != data.data) {
        this.currentTap = data.data;
        this.period = data.data == 1 ? 'last' : 'current';
        this.getRankList();
      }
    },
    noShowCurrentPrize(val) {
      this.showCurrentPrize = val;
    },
    noShowMyPrize(val) {
      this.showMyPrize = val;
    },
    onClickHandle(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          case 'periodTap':
            this.periodTap(data);
            break;
          case 'showCurrentPrize':
            this.showCurrentPrize = true;
            break;
          case 'showMyPrize':
            this.showMyPrize = true;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.charts {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  .top_box {
    width: 100%;
    /deep/ .cu-custom .cu-bar {
      background: linear-gradient(180deg, #d7c9ff 0%, #e1d7ff 100%) !important;
    }
    /deep/ .u-iconfont {
      color: #3d3d3d !important;
      font-size: 30rpx !important;
    }
    /deep/ .content {
      justify-content: center;
    }
    .title {
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 700;
      color: #000000;
    }
  }
  .contain {
    flex: 1;
    overflow: auto;

    .charts_box {
      height: 476rpx;
      width: 100%;
      border-top: 1rpx solid #d8cff5;
      background: linear-gradient(180deg, #e1d7ff 0%, #ffffff 100%);
      padding: 0 45rpx 0 38rpx;
      position: relative;
      .nav {
        /deep/ .u-tabs {
          background: none !important;
        }
      }
      .main {
        position: absolute;
        bottom: 0;
        left: 38rpx;
        display: flex;
        align-items: flex-end;
        .second_box {
          width: 227rpx;
          height: 318rpx;
          background: #d7c9ff;
          border-radius: 20rpx 20rpx 0 0;
          position: relative;
          overflow: hidden;
          .number {
            position: absolute;
            right: -16rpx;
            top: -22rpx;
            font-size: 140rpx;
            font-family: DIN-Medium, DIN;
            font-weight: 500;
            color: #c0aff0;
            line-height: 1;
          }
          .user {
            width: 100%;
            height: 200rpx;
            margin-top: 91rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            .top_imgBox {
              width: 140rpx;
              height: 138rpx;
              position: relative;
              .avatar_frame {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 999;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .photo_box {
                width: 106rpx;
                height: 106rpx;
                border-radius: 50%;
                position: absolute;
                left: 16rpx;
                top: 20rpx;
                img {
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }
              }
            }
            .name {
              font-size: 28rpx;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              height: 50rpx;
            }
          }
        }
        .first_box {
          position: relative;
          height: 365rpx;
          width: 227rpx;
          background: #d7c9ff;
          border-radius: 20rpx 20rpx 0 0;
          box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(160, 132, 240, 0.6);
          z-index: 666;
          overflow: hidden;
          .number {
            position: absolute;
            right: -44rpx;
            top: -48rpx;
            font-size: 270rpx;
            font-family: DIN-Bold, DIN;
            font-weight: 700;
            color: #c0aff0;
            line-height: 1;
          }
          .user {
            width: 100%;
            height: 230rpx;
            margin-top: 58rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            .top_imgBox {
              width: 175rpx;
              height: 175rpx;
              position: relative;
              margin-bottom: 15rpx;
              .avatar_frame {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 999;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .photo_box {
                width: 132rpx;
                height: 132rpx;
                border-radius: 50%;
                position: absolute;
                left: 20rpx;
                top: 20rpx;
                img {
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }
              }
            }
            .name {
              font-size: 28rpx;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              height: 50rpx;
            }
          }
        }
        .third_box {
          position: relative;
          width: 227rpx;
          height: 289rpx;
          background: #d7c9ff;
          border-radius: 20rpx 20rpx 0 0;
          overflow: hidden;
          .number {
            position: absolute;
            right: -16rpx;
            top: -22rpx;
            font-size: 140rpx;
            font-family: DIN-Medium, DIN;
            font-weight: 500;
            color: #c0aff0;
            line-height: 1;
          }
          .user {
            width: 100%;
            height: 200rpx;
            margin-top: 62rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            .top_imgBox {
              width: 140rpx;
              height: 140rpx;
              position: relative;
              .avatar_frame {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 999;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .photo_box {
                width: 106rpx;
                height: 106rpx;
                border-radius: 50%;
                position: absolute;
                left: 16rpx;
                top: 20rpx;
                img {
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }
              }
            }
          }
          .name {
            font-size: 28rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 50rpx;
          }
        }
      }
    }
    .chartsList {
      width: 750rpx;
      min-height: calc(100% - 634rpx);
      background: #ffffff;
      box-shadow: 0rpx 4rpx 10rpx 0rpx #a084f0;
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      position: relative;
      z-index: 999;
      padding: 39rpx 30rpx 8rpx;
      margin-bottom: 154rpx;
      .current_prize {
        position: absolute;
        right: 0;
        top: 39rpx;
        width: 86rpx;
        height: 70rpx;
        background: #ff64a8;
        border-radius: 100rpx 0 0 100rpx;
        font-size: 24rpx;
        font-family: PingFang SC-Heavy, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        padding: 0 13rpx 0 25rpx;
      }
      .tap {
        width: 570rpx;
        height: 70rpx;
        background: #d7c9ff;
        border-radius: 100rpx 100rpx 100rpx 100rpx;
        margin: 0 91rpx 0 59rpx;
        padding: 7rpx;
        display: flex;
        justify-content: flex-end;
        .currentTap {
          width: 276rpx;
          height: 56rpx;
          font-size: 26rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.7);
          text-align: center;
          line-height: 56rpx;
        }
        .activeTap {
          background: #a084f0;
          border-radius: 100rpx 100rpx 100rpx 100rpx;
          color: #ffffff;
        }
      }
      .lineBox {
        width: 100%;
        height: 180rpx;
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #d8d8d8;
        padding-top: 20rpx;
        .paiNumber {
          width: 44rpx;
          height: 42rpx;
          margin-right: 17rpx;
          img {
            height: 100%;
            width: 100%;
          }
          .paiText {
            font-size: 30rpx;
            font-family: Oswald-Regular, Oswald;
            font-weight: 400;
            color: #a1a1a1;
            line-height: 42rpx;
            text-align: center;
          }
        }
        .photo {
          width: 132rpx;
          height: 132rpx;
          position: relative;
          .avatar_frame {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 999;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .photo_box {
            width: 101rpx;
            height: 101rpx;
            border-radius: 50%;
            position: absolute;
            left: 16rpx;
            top: 20rpx;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
        }
        .detail_box {
          width: 166rpx;
          height: 86rpx;
          margin-right: 18rpx;
          .name {
            font-size: 28rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 700;
            color: #3d3d3d;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .money {
            font-size: 22rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #939393;
            margin-top: 15rpx;
          }
        }
        .prize {
          width: 104rpx;
          height: 104rpx;
          margin-right: 47rpx;
          img {
            height: 100%;
            width: 100%;
          }
        }
        .prize_name {
          font-size: 22rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 400;
          color: #a084f0;
        }
      }
    }
  }
  .bottom_box {
    width: 100%;
    height: 154rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #d8d8d8;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.302);
    padding: 0 30rpx;
    z-index: 1000;
    .paiNumber {
      width: 44rpx;
      height: 42rpx;
      margin-right: 17rpx;
      img {
        height: 100%;
        width: 100%;
      }
      .paiText {
        font-size: 30rpx;
        font-family: Oswald-Regular, Oswald;
        font-weight: 400;
        color: #a1a1a1;
        line-height: 42rpx;
        text-align: center;
      }
    }
    .photo {
      width: 132rpx;
      height: 132rpx;
      position: relative;
      .avatar_frame {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 999;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .photo_box {
        width: 101rpx;
        height: 101rpx;
        border-radius: 50%;
        position: absolute;
        left: 16rpx;
        top: 20rpx;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
    .detail_box {
      width: 166rpx;
      height: 86rpx;
      margin-right: 18rpx;
      .name {
        font-size: 28rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 700;
        color: #3d3d3d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .money {
        font-size: 22rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #939393;
        margin-top: 15rpx;
      }
    }
    .prize {
      width: 104rpx;
      height: 104rpx;
      margin-right: 47rpx;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .prize_name {
      font-size: 22rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #a084f0;
    }
    .text {
      font-size: 24rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 700;
      color: #3d3d3d;
      margin-left: 46rpx;
    }
  }
  .rules {
    position: fixed;
    right: 0;
    top: 228rpx;
    width: 70rpx;
    height: 41rpx;
    background: #a186f0;
    border-radius: 100rpx 0 0 100rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    padding: 0 8rpx 0 14rpx;
    z-index: 1200;
  }
  .my_prize {
    position: fixed;
    right: 0;
    top: 282rpx;
    width: 86rpx;
    height: 70rpx;
    background: #a186f0;
    border-radius: 100rpx 0 0 100rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    padding: 0 13rpx 0 25rpx;
    z-index: 1200;
  }
  // 组件里面设置deep无效，要在父组件设置就可以
  .m_prize {
    /deep/ .u-drawer-bottom {
      background: none !important;
      // background-color: rgba(0, 0, 0, 0.6) !important;
    }
    /deep/ .u-close {
      width: 60rpx;
      height: 60rpx;
      border: 4rpx solid #fff;
      border-radius: 50%;
      text-align: center;
      line-height: 52rpx;
    }
  }
  // /deep/ .empty-img {
  //   width: 416rpx;
  // }
  /deep/ .empty-text {
    margin-top: 40rpx !important;
  }
}
</style>
